<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img/原型对象.png">
<img src="../img/构造器.png">
<input id="app" value="">
<button id="btn" onclick="myFunction()">点击</button>
<script>


    class Parent {
        constructor(name, age) {
            console.log('我是父类，'+this)
            console.log(this)
            this.name = name;
            this.age = age;
            console.log(this)
        }

        sings() {
            console.log('我是父类sings，'+this)
            console.log(this)
            return '我是中国人，我叫' + this.name + ',今年' + this.age + '岁，我会唱国歌'
        }
    }

    var that;
    class Star extends Parent {
        constructor(name, age) {
            super(name, age)
            that=this
            console.log('我是子类，'+this)
            console.log(this)
            this.name = name;
            this.age = age;
            // this.btn=document.getElementById('btn')
            // this.btn.onclick=this.sing()
        }

        sing() {
            console.log('sing'+this)
            console.log('冰雨11');
            return this.name + '冰雨' + this.age
        }
    }

    Star.prototype.sin=function () {
        console.log("每个对象都有一个原型，存放共享方法避免重复创建对象，浪费空间：hello")
    }

    function myFunction() {
        alert(1)
        const ldh = new Star('刘德华', '20')
        console.log(that)
        console.log(that===ldh)
        console.log(ldh.sing())
    }


    const ldh = new Star('刘德华', '20')
    const zxu = new Star('张学友', '20')
    const lm = new Star('黎明', '20')
    zxu.sin()
    ldh.sin()
    lm.sin()
    // __proto__每个对象都有一个隐形原型对象
    // 原型对象存放共享方法，共享属性放在构造器
    console.log(lm.sin()==ldh.sin())
    console.log("__proto__相当与prototype",lm.__proto__==Star.prototype)
    const gq = ldh.sings();
    const input = document.getElementById('app')
    input.value = gq

    /**
     * 方法中的this,指向被调用的那个对象，如果是按钮调用，则this为那个按钮
     * constructor中的this指向类实例对象
     * 类里面的共有属性和方法一定要加this使用
     * 在ES6中类没有变量提升，所以必须先定义类，然后再通过类去调用属性和方法，类似Java
     */


</script>

</body>
</html>